<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>管理员平台</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<script src="${_path}/lib/echarts-3.1.1/echarts.min.js"></script>
<script src="${_path}/lib/bootbox-4.4.0/bootbox.min.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .chart {
	height: 300px;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./manage-menu.jsp?active=statistics" />
	<div class="body">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-body">
					<label>时间范围：</label>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="1">一天</a>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="7">一周</a>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="30">一个月</a>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="90">一个季度</a>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="365">一年</a>
					<a href="javascript:;" class="btn btn-warning btn-sm select" value="0">全部</a>
				</div>
			</div>
		</div>
		<div class="col-sm-8">
			<div class="panel panel-default">
				<div class="panel-heading">路径访问</div>
				<div class="panel-body">
					<div class="chart" id="name"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="panel panel-default">
				<div class="panel-heading">请求环境</div>
				<div class="panel-body">
					<div class="chart" id="env"></div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			setTimeout(function() {
				initName(1);
				initEnv(1);
			}, 1);
			initEvent();
			function initEvent() {
				$('.panel-body>a.select').bind('click', function() {
					var days = $(this).attr('value');
					initName(days);
					initEnv(days);
				});
			}
			function initName(days) {
				var nameChart = echarts.init($('#name')[0]);
				nameChart.setOption({
					toolbox : {
						feature : {
							saveAsImage : {
								show : true
							}
						}
					},
					tooltip : {
						trigger : 'item',
						formatter : "菜单：{b}<br>次数：{c}"
					},
					xAxis : [ {
						type : 'category',
						data : []
					} ],
					yAxis : [ {
						type : 'value'
					} ],
					dataZoom : [ {
						show : true,
						start : 0,
						end : 20
					}, {
						type : 'inside',
						start : 60,
						end : 80
					} ],
					grid : {
						top : 50,
						bottom : 80
					},
					series : [ {
						name : '访问',
						type : 'bar',
						itemStyle : {
							normal : {
								label : {
									show : true,
									position : 'top'
								}
							}
						},
						barMaxWidth : 60
					} ]
				});
				nameChart.showLoading();
				$.ajax({
					url : './name/',
					type : 'post',
					dataType : 'json',
					data : {
						days : days
					},
					success : function(result) {
						if (result.succ == 0) {
							var xs = [], ss = [];
							$.each(result.data, function(i, n) {
								xs.push(n.name);
								ss.push({
									name : n.name,
									value : n.count
								});
							});
							nameChart.setOption({
								xAxis : [ {
									data : xs
								} ],
								series : [ {
									data : ss
								} ]
							});
							nameChart.hideLoading();
						} else
							console.log('获取访问统计失败：' + result.message);
					},
					error : function() {
						console.log('获取访问统计失败');
					}
				});
			}
			function initEnv(days) {
				var envChart = echarts.init($('#env')[0]);
				envChart.setOption({
					toolbox : {
						feature : {
							saveAsImage : {
								show : true
							}
						}
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a}：{b}<br>占比：{d}% ({c})"
					},
					series : [ {
						name : '浏览器',
						type : 'pie',
						label : {
							normal : {
								position : 'inner'
							}
						},
						radius : '45%'
					}, {
						name : '操作系统',
						type : 'pie',
						radius : [ '60%', '75%' ]
					} ]
				});
				envChart.showLoading();
				$.ajax({
					url : './env/',
					type : 'post',
					dataType : 'json',
					data : {
						days : days
					},
					success : function(result) {
						if (result.succ == 0) {
							var oss = [], browsers = [];
							$.each(result.data.oss, function(i, n) {
								oss.push({
									name : n.name,
									value : n.count
								});
							});
							$.each(result.data.browsers, function(i, n) {
								browsers.push({
									name : n.name,
									value : n.count
								});
							});
							envChart.setOption({
								series : [ {
									data : browsers
								}, {
									data : oss
								} ]
							});
							envChart.hideLoading();
						} else
							console.log('获取操作系统占比失败：' + result.message);
					},
					error : function() {
						console.log('获取操作系统占比失败');
					}
				});
			}
		});
	</script>
</body>
</html>